<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>佳口腊味加工店登录界面</title>

    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <!-- 引入样式 -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="css/element-ui.css">

    <!-- 引入组件库 -->
    <script src="js/element-ui.js"></script>
    <!--    &lt;!&ndash; 引入样式 &ndash;&gt;-->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

    <style>

body {
  background-color: #f5f5f5;
}

.login-container {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  margin: 100px auto;
  max-width: 300px;
  padding: 40px;
  }
    </style>

</head>
<body>
<div id="app">

    <div class="login-container">
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="24">
                <div class="grid-content bg-purple-light">
                    <!-- rules传入约定验证规则 -->
                    <!-- prop绑定要验证的字段名 -->
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="60px" class="demo-ruleForm">
                        <el-form-item label="账号" prop="account">
                            <el-input v-model="ruleForm.account" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <!-- show-password密码框的小眼睛 -->
                            <!-- clearable清空选择器,适用于单选框 -->
                            <el-input v-model="ruleForm.password" show-password clearable></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>

</div>

</body>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            ruleForm: {
            userAccount: '',
            password: '',
             },
            rules: {
            account: [
                { required: true, message: '请输入账号', trigger: 'blur' },
                { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
                ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
                ]
            },
            loading: true

       },

       methods: {
            submitForm(ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        let parm=  new URLSearchParams();
                        parm.append("userAccount",this.ruleForm.account);
                        parm.append("password",this.ruleForm.password)
                        axios.post('/role/login',parm).then(response=>{
                                if (response.data.status==10000) {
                                    console.log(response.data)
                                    localStorage.setItem("jwt",response.data.date);
                                    sessionStorage.setItem("account",this.ruleForm.userAccount)
                                    window.location = "/index.html"; //成功后跳转
                                }else{
                                        this.$message.error(response.data.msg);
                                        return false;
                                    }
                           })
                    }
                });
            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
       }

    })

</script>

</html>